<template>
  <div>
    <!--条件查询-->
    <el-row>
      <el-col :span="24">
        <el-card header="歌曲列表">

          <!--输入框-->
          <el-form :inline="true">
            <el-form-item label="用户名称">
              <el-input
                  v-model="songName"
                  placeholder="名称"
                  clearable>
              </el-input>
            </el-form-item>

            <!--搜索-->
            <el-form-item>
              <el-button icon="el-icon-search" @click="getSongList">搜索</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col span="24">
        <el-card>
          <el-header style="background-color: #ffffff">
            <el-button icon="el-icon-circle-plus-outline" @click="insertMusic">添加音乐</el-button>
          </el-header>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                type="index"
                width="100"
                label="编号" sortable>
            </el-table-column>

            <el-table-column
                prop=""
                label="详情信息">
              <template slot-scope="scope">
                <el-button size="mini" @click="getSongInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>

            <el-table-column
                prop="songName"
                label="歌名">
            </el-table-column>

            <el-table-column
                prop="singerName"
                label="作者">
            </el-table-column>

            <el-table-column
                prop="songIntroduce"
                label="专辑名">
            </el-table-column>


            <el-table-column label="操作" width="230">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="handleEdit(scope.row)">编辑
                </el-button>
                <el-popconfirm
                    :title="('确认删除'+scope.row.songName+'这个歌曲吗?')"
                    @confirm="handleDelete(scope.row)"
                >
                  <el-button
                      style="margin-left: 20px"
                      icon="el-icon-delete"
                      size="mini"
                      type="danger" slot="reference">删除
                  </el-button>
                </el-popconfirm>

              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <!--详情-->
    <el-dialog title="歌单详情" :visible.sync="dialog.dialogInfo">
      <el-descriptions class="margin-top" :column="4" direction="vertical" border>
        <el-descriptions-item label="歌曲">
          <img :src="songInfo.songPhoto" style="height: 70px;width: 70px;border-radius: 10px" @click="updatePhotoInfo">
        </el-descriptions-item>
        <el-descriptions-item label="歌曲名">{{ songInfo.songName }}</el-descriptions-item>
        <el-descriptions-item label="作者">{{ songInfo.singerName }}</el-descriptions-item>
        <el-descriptions-item label="歌曲类型">{{ songInfo.songStyle }}</el-descriptions-item>
        <el-descriptions-item label="所属专辑">{{ songInfo.songIntroduce }}</el-descriptions-item>
        <el-descriptions-item label="播放次数">{{ songInfo.songNum }}</el-descriptions-item>
        <el-descriptions-item label="音乐链接" >
            <el-button @click="updateSongUrl" size="mini" type="primary">上传</el-button>
            {{ songInfo.songUrl}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="音乐图片编辑" :visible.sync="dialog.dialogPhoto">
      <el-upload
          class="upload-demo"
          drag
          action="http://124.221.244.228:8089/upload"
          multiple
          :on-success="onSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>

    <el-dialog title="音乐链接编辑" :visible.sync="dialog.dialogUrl">
      <el-upload
          class="upload-demo"
          drag
          action="http://124.221.244.228:8089/upload"
          multiple
          :on-success="onSuccess1">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="歌单信息编辑" :visible.sync="dialog.dialogUpdate">
      <el-form>
        <el-form-item label="歌名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="song.songName"></el-input>
        </el-form-item>
        <el-form-item label="歌单名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="song.songIntroduce" disabled></el-input>
        </el-form-item>


        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="song.singerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="歌曲类型" :label-width="formLabelWidth">
          <el-select v-model="song.songStyle" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加-->
    <el-dialog title="歌单信息编辑" :visible.sync="dialog.dialogInsert">

      <el-alert
          title="添加步骤"
          type="error"
          description="先加入歌名,歌曲类型,作者(如果没有作者请先加入作者),在音乐详情里面上传图片和链接,在专辑里面添加音乐到专辑"
          style="margin: 30px 0px">
      </el-alert>

      <el-form>
        <el-form-item label="歌名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="song.songName"></el-input>
        </el-form-item>

        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-button type="primary" size="mini" style="margin-left: 30px" @click="insertSingerName">添加作者</el-button>
        </el-form-item>
        <el-form-item label="歌曲类型" :label-width="formLabelWidth">
          <el-select v-model="song.songStyle" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择作者" :visible.sync="dialog.dialogInsertSinger">
      <el-card header="歌手列表">
        <!--输入框-->
        <el-form :inline="true">
          <el-form-item label="歌单名称">
            <el-input
                v-model="singerName"
                placeholder="歌手名字"
                clearable>
            </el-input>
          </el-form-item>

          <!--搜索-->
          <el-form-item>
            <el-button icon="el-icon-search" @click="getSingerNameToInsert">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table
            :data="listSinger"
            style="width: 100%">

          <el-table-column
              type="index"
              label="编号" sortable>
          </el-table-column>
          <el-table-column
              prop="singerName"
              label="歌手名" sortable>
          </el-table-column>
          <el-table-column
              prop="singerSex"
              label="歌手性别" sortable>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="getToInsert(scope.row)">添加</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      songName: '', //搜索栏中的歌名
      current: 1, //当前页数
      size: 10,
      tableData: [], //获取列表数据
      total: 0,//总数
      songInfo: {},//歌曲信息
      singerName: '', //歌手名字
      dialog: {
        dialogInfo: false, //详情显示
        dialogPhoto: false, //图片上传
        dialogUpdate: false, //编辑
        dialogUrl: false,  //更新链接
        dialogInsert: false, //添加
        dialogInsertSinger: false //添加作者
      },
      songId: 0, //选中的id
      song: {},//当前对象
      formLabelWidth: "120px", //编辑页面距离
      options: ["民谣", "轻音乐", "流行", "说唱", "爵士", "摇滚"], //编辑页面
      listSinger: [] ,//搜索到得歌手集合
      singer:{
        singerName:'',
        singerId:0
      }

    }
  },
  created() {
    this.getSongList()
  },
  methods: {
    getSongList() {
      this.$http.get("/song/findSong", {
        params: {
          current: this.current,
          size: this.size,
          songName: this.songName,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    handleSizeChange(res) {

    },
    handleCurrentChange(res) {
      this.current = res
      this.getSongList()
    },
    open2() {
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '修改失败',
        type: 'warning'
      });
    },
    handleDelete(row) {
      this.$http.get("/song/deleteSong", {
        params: {
          songId: row.songId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    getSongInfo(row) {
      this.dialog.dialogInfo = true
      this.songId = row.songId
      this.$http.get("/song/findSongBySongId", {
        params: {
          songId: row.songId
        }
      }).then(res => {
        console.log(res)
        this.songInfo = res.data.data[0]
      })
    },
    updatePhotoInfo() {
      this.dialog.dialogPhoto = true
    },
    onSuccess(res) {
      this.$http.get("/song/updatePhoto", {
        params: {
          songPhoto: res.data,
          songId: this.songId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    handleEdit(row) {
      this.$http.get("/song/findSongBySongId", {
        params: {
          songId: row.songId
        }
      }).then(res => {
        console.log(res)
        this.song = res.data.data[0]
      })
      this.dialog.dialogUpdate = true
    },
    updateSongUrl() {
      this.dialog.dialogUrl = true
    },
    onSuccess1(res) {
      this.$http.get("/song/updateUrl", {
        params: {
          songUrl: res.data,
          songId: this.songId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)
        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    insertMusic() {
      this.dialog.dialogInsert = true
    },
    insertSingerName() {
      this.dialog.dialogInsertSinger = true
    },
    getSingerNameToInsert() {
      this.$http.get("/singer/findSingerByName", {
        params: {
          singerName: this.singerName
        }
      }).then(res => {
        console.log(res)
        this.listSinger = res.data.data
      })
    },
    getToInsert(row) {
      this.singer.singerName = row.singerName
      this.singer.singerId = row.singerId
      this.dialog.dialogInsertSinger = false
    },
    submitUpdate(){
      this.$http.get("/song/insertSong",{
        params:{
          singerName:this.singer.singerName,
          singerId:this.singer.singerId,
          songName:this.song.songName,
          songStyle:this.song.songStyle
        }
      }).then(res=>{
        setTimeout(() => {
          history.go(0)
        }, 1000)
        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    }
  },
}
</script>

<style scoped>
.block {
  margin-top: 20px;
  text-align: center;
}
</style>